import {
	__experimentalHeading as Heading,
	Button,
	CheckboxControl,
	ToggleControl,
} from '@wordpress/components';
import { createInterpolateElement } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import clsx from 'clsx';
import { intlFormat } from 'date-fns';
import { BillingPurchaseInfoPopover } from '../../../dataviews';
import type { AtomicTransfer, Purchase } from '@automattic/api-core';

type Props = {
	atomicTransfer?: Pick< AtomicTransfer, 'created_at' >;
	purchase: Purchase | undefined;
	siteSlug: string;
	atomicRevertCheckOne: boolean;
	onClickCheckOne: ( isChecked: boolean ) => void;
	atomicRevertCheckTwo: boolean;
	onClickCheckTwo: ( isChecked: boolean ) => void;
	hasBackupsFeature: boolean;
	isRemovePlan?: boolean;
	isDowngradePlan?: boolean;
	enableLosslessRevert?: boolean;
	setEnableLosslessRevert?: ( isChecked: boolean ) => void;
	action: 'cancel-purchase' | 'downgrade-plan';
};

export function AtomicRevertStep( props: Props ) {
	const {
		atomicTransfer,
		purchase,
		siteSlug,
		atomicRevertCheckOne,
		atomicRevertCheckTwo,
		enableLosslessRevert,
		setEnableLosslessRevert,
		hasBackupsFeature,
		onClickCheckOne,
		onClickCheckTwo,
		isRemovePlan,
		isDowngradePlan,
		action,
	} = props;

	if ( ! siteSlug || ! atomicTransfer || ! purchase || ! atomicTransfer.created_at ) {
		return null;
	}

	const atomicTransferDate = intlFormat( atomicTransfer.created_at, { dateStyle: 'medium' } );
	const isPlanPurchase = purchase.is_plan;
	const createInfoPopover = (
		<BillingPurchaseInfoPopover>
			{ sprintf(
				/* translators: %(atomicTransferDate)s is a date */
				__(
					'On %(atomicTransferDate)s, we automatically moved your site to a platform that supports the usage of plugins, custom themes, and hosting features. If you deactivate your plan, we will move your site back to its original platform.'
				),
				{ atomicTransferDate }
			) }
		</BillingPurchaseInfoPopover>
	);

	let subHeaderText;
	if ( isPlanPurchase ) {
		if ( isRemovePlan ) {
			subHeaderText = createInterpolateElement(
				sprintf(
					/* translators: %(atomicTransferDate)s is a date */
					__(
						'If you deactivate your plan, we will set your site to private and revert it to the point when you installed your first plugin or custom theme, or activated hosting features on <strong>%(atomicTransferDate)s</strong>. All of your posts, pages, and media will be preserved, except for content generated by plugins or custom themes. <moreInfoTooltip/>'
					),
					{ atomicTransferDate }
				),
				{
					moreInfoTooltip: createInfoPopover,
					strong: <strong className="is-highlighted" />,
				}
			);
		} else if ( isDowngradePlan ) {
			subHeaderText = createInterpolateElement(
				sprintf(
					/* translators: %(atomicTransferDate)s is a date */
					__(
						'If you downgrade your plan, we will immediately set your site to private and revert it to the point when you installed your first plugin or custom theme, or activated hosting features on <strong>%(atomicTransferDate)s</strong>.'
					),
					{
						atomicTransferDate,
					}
				),
				{
					strong: <strong className="is-highlighted" />,
				}
			);
		} else {
			subHeaderText = createInterpolateElement(
				sprintf(
					/* translators: %(purchaseRenewalDate)s and %(atomicTransferDate)s are both dates */
					__(
						'If you cancel your plan, when your plan expires on <strong>%(purchaseRenewalDate)s</strong>, we will set your site to private and revert it to the point when you installed your first plugin or custom theme, or activated hosting features on <strong>%(atomicTransferDate)s</strong>. All of your posts, pages, and media will be preserved, except for content generated by plugins or custom themes. <moreInfoTooltip/>'
					),
					{
						purchaseRenewalDate: intlFormat( purchase.expiry_date, { dateStyle: 'medium' } ),
						atomicTransferDate,
					}
				),
				{
					moreInfoTooltip: createInfoPopover,
					strong: <strong className="is-highlighted" />,
				}
			);
		}
	} else {
		subHeaderText = createInterpolateElement(
			sprintf(
				/* translators: %(atomicTransferDate)s is a date */
				__(
					'If you deactivate your product, we will set your site to private and revert it to the point when you installed your first plugin or custom theme, or activated hosting features on <strong>%(atomicTransferDate)s</strong>. All of your posts, pages, and media will be preserved, except for content generated by plugins or custom themes. <moreInfoTooltip/>'
				),
				{ atomicTransferDate }
			),
			{
				moreInfoTooltip: createInfoPopover,
				strong: <strong className="is-highlighted" />,
			}
		);
	}

	const enabledClassName = `${ action }-form__atomic-revert-checkbox-enabled`;

	const checkBox1ClassName = clsx( 'required-checkboxes', {
		[ enabledClassName ]: !! atomicRevertCheckOne,
	} );

	const checkBox2ClassName = clsx( 'required-checkboxes', {
		[ enabledClassName ]: !! atomicRevertCheckTwo,
	} );

	return (
		<div className={ `${ action }-form__atomic-revert` }>
			<Heading level={ 4 }>{ __( 'Proceed With Caution' ) }</Heading>
			<br />
			<div>{ subHeaderText }</div>
			<p>
				{ createInterpolateElement(
					__(
						'Please <strong>confirm and check</strong> the following items before you continue with plan deactivation:'
					),
					{ strong: <strong /> }
				) }
			</p>
			<CheckboxControl
				className={ checkBox1ClassName }
				label={
					isPlanPurchase && ! isRemovePlan && ! isDowngradePlan
						? sprintf(
								/* translators: %(purchaseRenewalDate)s is the date that the purchase renews */
								__(
									'Any themes/plugins you have installed on the site will be removed on %(purchaseRenewalDate)s, along with their data.'
								),
								{
									purchaseRenewalDate: intlFormat( purchase.expiry_date, { dateStyle: 'medium' } ),
								}
						  )
						: __(
								'Any themes/plugins you have installed on the site will be removed, along with their data.'
						  )
				}
				checked={ atomicRevertCheckOne }
				onChange={ onClickCheckOne }
			/>
			<CheckboxControl
				className={ checkBox2ClassName }
				label={
					isPlanPurchase && ! isRemovePlan && ! isDowngradePlan
						? sprintf(
								/* translators: %(purchaseRenewalDate)s is the date that the purchase renews */
								__(
									'On %(purchaseRenewalDate)s, your site will return to its original settings and theme right before the first plugin or custom theme was installed.'
								),
								{
									purchaseRenewalDate: intlFormat( purchase.expiry_date, { dateStyle: 'medium' } ),
								}
						  )
						: __(
								'Your site will return to its original settings and theme right before the first plugin or custom theme was installed.'
						  )
				}
				checked={ atomicRevertCheckTwo }
				onChange={ onClickCheckTwo }
			/>
			{ hasBackupsFeature && (
				<div className={ `${ action }-form__backups` }>
					<div>
						<h4>{ __( 'Would you like to download the backup of your site?' ) }</h4>
						<p>
							{ __(
								"To make sure you have everything after your plan is deactivated or if you'd like to migrate, you can download a backup."
							) }
						</p>
					</div>
					<Button variant="primary" href={ `/backup/${ siteSlug }` }>
						{ __( 'Go to your backups' ) }
					</Button>
				</div>
			) }
			{ isDowngradePlan && (
				<div className="downgrade-purchase-form__atomic-lossless-revert">
					<ToggleControl
						className={
							enableLosslessRevert ? `${ action }-form__atomic-revert-checkbox-enabled` : ''
						}
						label={ __( 'Restore my posts, pages, and media.' ) }
						help={ __(
							'Your posts, pages, and media added after upgrading will be automatically imported to your downgraded site. This process may take up to 24 hours.'
						) }
						checked={ enableLosslessRevert }
						onChange={ setEnableLosslessRevert! }
					/>
				</div>
			) }
		</div>
	);
}
